<template>
  <CommonCard :title="`累积用户数`" :value="(usersTotal as number)">
    <v-chart :option="getOption()" autoresize />
    <template v-slot:bottom>
      <div class="total-users-bottom">
        <div>日同比</div>
        <div class="emphasis">{{ userGrowthLastDay }}%</div>
        <div class="increment"></div>
        <div class="right">月同比</div>
        <div class="emphasis">{{ userGrowthLastMonth }}%</div>
        <div class="decrement"></div>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TotalUsers",
});
</script>

<script setup lang="ts">
//引入计算属性
import { computed } from "vue";
//引入store
import useDataState from "@/stores/resportData";
//得到store对象
const dataStore = useDataState();

const usersTotal = computed(() => dataStore.reportData.usersTotal);
const usersLastMonth = computed(() => dataStore.reportData.usersLastMonth);
const userGrowthLastDay = computed(
  () => dataStore.reportData.userGrowthLastDay
);
const userGrowthLastMonth = computed(
  () => dataStore.reportData.userGrowthLastMonth
);

const getOption = () => {
  return {
    xAxis: {
      // 去掉两边留白
      boundaryGap: false,
      // 不显示
      show: false,

      //如果是一个进度条类似的图,没有x轴数据,我们可以使用min和max来限定x的起始和结束
      min: 0, // x轴最小值
      max: usersTotal.value, // x轴最大值
    },
    yAxis: {
      // y轴为类目轴 => 水平柱状图
      type: "category",
      show: false, // 不显示y轴
    },
    //图标配置
    series: {
      name: "用户增长量",
      type: "bar",
      //就一个数据,x轴展示的是所有的用户数,data这里展示的,上个月访问的用户数
      data: [(usersTotal.value as number) - (usersLastMonth.value as number)],
      // 柱条的宽度
      barWidth: 10,

      // 展示背景(进度条拉满一个灰色的低)
      showBackground: true,
      // 背景样式
      backgroundStyle: {
        // 背景色
        color: "blue",
      },

      // 柱条样式
      itemStyle: {
        color: "green",
      },

      // 柱条显示的内容
      label: {
        show: true, // 默认显示当前柱的数据
        formatter: "", // 显示的自定义内容
        position: "right", // 内容的位置
        color: "#fff", // 颜色
      },
    },
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
    },
    // 显示提示
    tooltip: {
      // formatter (params) {
      //   // console.log(params)
      //   const {seriesName, marker, value} = params
      //   return `${seriesName}<br>${marker}${value}`
      // },
      trigger: "axis",
    },
  };
};
</script>

<style lang="scss" scoped>
.total-users-bottom {
  display: flex;
  align-items: center;

  .right {
    margin-left: 10px;
  }
}
</style>
